<template>
  <div class="right" v-show="newSurveyData.currentOrder !== -1" @click.stop>
    <template v-if="newSurveyData.batchEdit">
      <component v-if="newSurveyData.isSubTitle" :is="'BatchEditTitle'" />
      <component v-else :is="'BatchEdit'" />
    </template>
    <template v-else>
      <h3>题目设置</h3>
      <div class="question-action btn-frame">
        <button class="custom-btn btn-primary" @click="upQuestion"><span>上移</span></button>
        <button class="custom-btn btn-primary" @click="downQuestion"><span>下移</span></button>
        <button class="custom-btn btn-primary" @click="newSurveyData.modifyBatchEdit(true)"
          v-show="showBatchEdit"><span>批量编辑选项</span></button>
        <button class="custom-btn btn-primary" @click="newSurveyData.modifyBatchEdit(true, true)"
          v-show="showBatchEditTitle"><span>批量编辑标题</span></button>
      </div>

      <label class="right-switch switch-frame" v-show="showCheckbox" for="check-required">
        <input id="check-required" type="checkbox" :checked="currentIsRequired" @change="newSurveyData.toggleRequired" />
        <div class="switch-btn"><span class="thumb"></span></div>
        <span class="text">必答题</span>
      </label>
      <label class="right-switch switch-frame" for="check-add">
        <input id="check-add" type="checkbox" :checked="newSurveyData.addFromCurrent"
          @change="newSurveyData.toggleAddFromCurrent" />
        <div class="switch-btn"><span class="thumb"></span></div>
        <span class="text">在此题目上方添加新的题目</span>
      </label>

      <div class="btn-frame del">
        <button class="custom-btn btn-danger" @click="delQuestion"><span>删除</span></button>
      </div>
    </template>
  </div>
</template>

<script>
import newSurveyData from '@/store/new-survey-data'
import { QUESTION_TYPE_DESCRIPTION, QUESTION_TYPE_SINGLE, QUESTION_TYPE_MULTI, QUESTION_TYPE_SELECT, QUESTION_TYPE_MATRIX_RADIO } from '@/constants/default'
import BatchEdit from "./_BatchEdit.vue"
import BatchEditTitle from "./_BatchEditTitle.vue"

export default {
  components: { BatchEdit, BatchEditTitle },
  data() {
    return {
      newSurveyData: newSurveyData(),
    }
  },
  computed: {
    currentIsRequired() {
      const co = this.newSurveyData.currentOrder
      const qs = this.newSurveyData.questions
      if (co < 0 || co >= qs.length) return false
      return qs[co].required === true
    },
    showCheckbox() {
      const co = this.newSurveyData.currentOrder
      const qs = this.newSurveyData.questions
      if (co < 0 || co >= qs.length) return false
      return qs[co].type !== QUESTION_TYPE_DESCRIPTION
    },
    showBatchEdit() {
      const co = this.newSurveyData.currentOrder
      const qs = this.newSurveyData.questions
      if (co < 0 || co >= qs.length) return false
      if (qs[co].type === QUESTION_TYPE_SINGLE) return true
      if (qs[co].type === QUESTION_TYPE_MULTI) return true
      if (qs[co].type === QUESTION_TYPE_SELECT) return true
      if (qs[co].type === QUESTION_TYPE_MATRIX_RADIO) return true
      return false
    },
    showBatchEditTitle() {
      const co = this.newSurveyData.currentOrder
      const qs = this.newSurveyData.questions
      if (co < 0 || co >= qs.length) return false
      return qs[co].type === QUESTION_TYPE_MATRIX_RADIO
    },

  },
  methods: {
    delQuestion() {
      if (window.confirm('确定删除？')) this.newSurveyData.delQuestion()
    },
    upQuestion() {
      this.newSurveyData.moveUp()
    },
    downQuestion() {
      this.newSurveyData.moveDown()
    },
  },
}
</script>

<style lang="scss" scoped>
.right {
  z-index: 10;
  position: fixed;
  top: 100px;
  right: 20px;

  width: 250px;
  min-height: 500px;
  padding: 20px;

  background-color: #fff;
  box-shadow: 0 0 10px 0 #ddd;

  h3 {
    margin-bottom: 20px;
  }

  .question-action {
    .custom-btn {
      margin: 6px 0;
    }
  }

  .right-checkbox {
    height: 30px;
    width: 100px;
    display: flex;
    align-items: center;
    cursor: pointer;

    input {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    span {
      padding-left: 10px;
    }
  }

  >.del {
    position: absolute;
    bottom: 10px;
  }
}</style>
